import React, { Component } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Divider } from 'antd';
import './statistics.less'

export default class Statistics extends Component {
  constructor(a) {
    super(a);
    this.state = {

    }
  }
  componentWillUnmount() {

  }
  componentDidMount() {
    meshLog("wjk scheduleSet", this.state.scheduleSet);

  }
  Changediv1 = () => {
    const div1 = document.getElementById("div1");
    div1.style.display = "block";
    const bt1 = document.getElementById("bt1");
    bt1.style.borderBottomColor = "red";
    const bt2 = document.getElementById("bt2");
    bt2.style.borderBottomColor = "white";

    const div2 = document.getElementById("div2");
    div2.style.display = "none";
  };
  Changediv2 = () => {
    const div2 = document.getElementById("div2");
    div2.style.display = "block";
    const bt1 = document.getElementById("bt1");
    bt1.style.borderBottomColor = "white";
    const bt2 = document.getElementById("bt2");
    bt2.style.borderBottomColor = "red";
    const div1 = document.getElementById("div1");
    div1.style.display = "none";
  };
  render() {
    return (
      <div className="statistics" >
        <div className="statisticsdaohang">
          <span className='statisticsdaohangzuo' >位置： 数据库管理 》用户跑步数据</span>
        </div>
        <div className="statisticsneirong1">
          <div className="statisti1" >
            <div className="canvas">
              <div class="piegraph1">
                <h1 style={{ marginLeft: -40, marginTop: 20 }}>男</h1>
                <h1 style={{ marginLeft: -60 }}>50%</h1>
                <h1 style={{ marginLeft: 60, marginTop: -70 }}>女</h1>
                <h1 style={{ marginLeft: 70, marginTop: 10 }}>50%</h1>
              </div>
              <div class="piegraph2"><h1 style={{ marginTop: 40 }}>平均时长</h1><h2>01:15</h2></div>
              <div class="piegraph3"><h1 style={{ marginTop: 40 }}>平均人数</h1><h2>50</h2></div>
            </div>
          </div>
          <div className="statisti2">
            <div className="canvas2">
              <h1 style={{ marginLeft: 20, fontSize: 20, paddingTop: 20 }}>平均人数</h1>
              <div className="allshuju" style={{ marginTop: 20 }} >
              </div>
              <div className="devlightslide1" style={{ marginTop: 30 }} >
                <div className="devlightcontent1"></div>
              </div>
              <div className="allshuju" style={{ marginTop: 30 }} >
              </div>
              <div className="devlightslide2" style={{ marginTop: 30 }} >
                <div className="devlightcontent2"></div>
              </div>
              <div className="allshuju" style={{ marginTop: 30 }} >
              </div>
              <div className="devlightslide3" style={{ marginTop: 30 }} >
                <div className="devlightcontent3"></div>
              </div>
            </div>
          </div>
        </div>
        <div className="statisticsneirong1">
          <div className="statisti3" >
            <div className="biaoge" >
              <button id="bt1" className='bt1' onClick={() => { this.Changediv1() }}>日数据</button>
              <button id="bt2" className='bt2' onClick={() => { this.Changediv2() }}>月数据</button>
              <Divider />
              <div id="div1" className="Changediv1">日数据 的内容</div>
              <div id="div2" className="Changediv2">月数据 的内容</div>
            </div>
          </div>
          <div className="statisti4">
            <div className="alldate" >
              <h1 style={{ marginTop: 40, fontSize: 20, width: 390 }}>今天人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>昨天人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>趋势:50%</h1>
              <Divider />
              <h1 style={{ marginTop: 40, fontSize: 20, width: 390 }}>本月人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>上月人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>趋势:50%</h1>
              <Divider />
              <h1 style={{ marginTop: 40, fontSize: 20, width: 390 }}>去年人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>今年人数：人</h1>
              <h1 style={{ marginTop: 20, fontSize: 20, width: 390 }}>趋势:50%</h1>
            </div>
          </div>
        </div>

      </div >
    )
  }
}
